<script setup>
import {ref, reactive, onMounted} from 'vue'
import Child from './Child.vue'

let childTitle = ref('初始的子标题')

function changeChildTitle() {
  childTitle.value += '#'
}

const childMsg = (msg)=> {
  alert('来自子组件的实时消息: ' + msg)
}

const person = reactive({
  name: '太上老君',
  age: 888
})

let child01 = ref(null)
onMounted(()=>{
  if (child01)
    console.log('data from child 1 (via defineExpose):', child01.value.children.name, child01.value.children.hobby, child01.value.childCount)
})

//自定义指令
const vHasBorder = {
  beforeMount(el) {
    el.style['border'] = '2px solid green'
  }
}

</script>

<template>
  <h3>script setup语法糖的演示 (props, emits, slots, attrs, defineExpose)</h3>
  <div v-has-border>自定义指令: 必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。
    参考文档:<a href="https://v3.cn.vuejs.org/api/sfc-script-setup.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4"><b>自定义指令</b></a>
  </div>
  <p>第一个子组件的数据(通过defineExpose暴露): {{child01 && child01.children}}, count is {{child01 && child01.childCount}}
  </p>

  <Child ref="child01" class="child" @childMsg="childMsg" empName="通天教主">
    <span class="slot">传点什么...</span>
  </Child>

  <Child class="child" @childMsg="childMsg" title="***父组件传递给子组件的标题***">
    <template v-slot:personslot>
      <div class="slot">
        <span>名字: {{person.name}}, 年龄: </span>
        <input type="number" v-model="person.age">
      </div>
    </template>
  </Child>

  <button @click="changeChildTitle" style="margin-top: 5px;">改变以下子组件的标题</button>
  <Child class="child" @childMsg="childMsg" :title="childTitle"></Child>

  <p>
    说明: &lt;script setup&gt; 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 &lt;script&gt; 语法，它具有更多优势：<br>
    1. 更少的样板内容，更简洁的代码。<br>
    2. 能够使用纯 Typescript 声明 props 和抛出事件。<br>
    3. 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。<br>
    4. 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。<br>
    官方文档: <a href="https://v3.cn.vuejs.org/api/sfc-script-setup.html"><b>单文件组件
&lt;script setup&gt;</b></a>
  </p>
</template>

<style scoped>

.child {
  background-color: #d4e4f6;
  margin-top: 5px;
  padding: 5px;
}

.slot {
  padding: 5px;
  background-color: thistle;
}

</style>